<template>
  <div class="comment">
    <div v-for="item in props.content" :key="item.id" style="width: 50%">
      <div class="comment-outBox" @click="goBlogDetail(item.blogId)">
        <span>{{ item.title }}</span>
        <div class="comment-innerBox">
          <div class="comment-avatar">
            <img :src="$store.getters.user.avatar" alt="" />
          </div>
          <div class="comment-info">
            {{ $store.getters.user.realname }}
            <span>
              {{ format(item.time) }}
            </span>
            {{ item.goodNum }}
            <p>
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { formatTime } from "../../../../formatTime";
import { commonType } from "@/type/mine";
import { computed, defineProps } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const $store = useStore();
type prop = {
  content: {
    type: Array<commonType>;
    default: any;
  };
};
const $router = useRouter();
const props = defineProps({
  content: {
    type: Array as () => Array<commonType>,
    default: () => [],
  },
});
const goBlogDetail = (id: string) => {
  $router.push("/detail/" + id);
};
const format = computed(() => {
  return function (val: string) {
    return formatTime(val);
  };
});
</script>

<style lang="scss" scoped>
.comment {
  box-sizing: border-box;
  padding: 2px 15px;
  display: flex;
  flex-wrap: wrap;
  .comment-outBox {
    background-color: rgba(0, 0, 0, 0.1);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.3s;

    &:hover {
      transform: scale(1.02);
      cursor: url("../../../../assets/img/cur/mais.png"), default;

      .comment-innerBox {
        background-color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  .comment-innerBox {
    display: flex;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 5px;

    &:hover {
      cursor: url("../../../../assets/img/cur/mais.png"), default;
    }

    .comment-avatar {
      img {
        border-radius: 50%;
        width: 50px;
        height: 50px;
      }
    }

    .comment-info {
      color: #555;
      font-size: 12px;
      font-weight: 200;
      margin-left: 8px;
      span {
        margin: 0 5px;
      }

      p {
        margin-top: 5px;
        font-weight: 400;
        font-size: 14px;
      }
    }
  }
}
</style>
